{{ define "chapter/index3.html"}}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<h3>ajax文件上传</h3>
<form  enctype="multipart/form-data">
    <input type="file" name="file" id="file"> <br>
    <input type="text" id="name"> <br>
    <input type="button" value="提交" id="btn-upload">
</form>
<script>
    var btn_upload = document.getElementById("btn-upload");
    btn_upload.onclick = function(ev){
        var form_data = new FormData();
        console.log($("#file"));
        console.log($("#file")[0]);
        console.log($("#file")[0].files[0]);
        var name = document.getElementById("name").value;
        form_data.append("file",$("#file")[0].files[0]);
        form_data.append("name",name);
        console.log(form_data);
        $.ajax({
            url:"/doupload3",
            type:"POST",
            data:form_data,
            contentType:false,
            processData:false,
            success:function(data){
                alert("文件上传成功！");
            },
            fail:function(err){
                console.log(err)
            }
        })
    }
</script>
</body>
</html>
{{end}}